<template>
    <div class="header">
        <Headset style="width: 40px; height: 40px; margin-left: 70px" @click="goHome"/> <span>Music</span>
        <el-menu :default-active="'1'" mode="horizontal" @select="handleSelect" router>
            <el-menu-item v-for="item, index of navMenus" :index="item.path" :key="index">{{ item.name }}</el-menu-item>
        </el-menu>
        <div class="headersearch">
            <span>
                <el-input v-model="keyword" placeholder="音乐搜索" @keyup.enter="search" />
            </span>
            <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
        </div>
    </div>
</template>
    
<script setup>
import { Headset,Search } from '@element-plus/icons-vue'
import {ref} from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const navMenus = ref([
    {
        name: '首页',
        path: '/'
    }, {
        name: '歌单',
        path: '/songlist'
    }, {
        name: '歌手',
        path: '/singer'
    }, {
        name: '我的音乐',
        path: '/mymusic'
    }
])

const goHome = ()=>{
    router.push({path:'/'});
}

const handleSelect = (key, keyPath) => {
    console.log(key, keyPath)
}



const keyword = ref('');

const router = useRouter();

const search = () => {
    if (keyword.value) {
        router.push({
            path: '/search',
            query: {
                keyword: keyword.value
            }
        })  
    } else {
        ElMessage.error('查询条件不能为空');
        
    }
}
</script>
    
<style scoped>
.header {
    width: 90%;
    height: 60px;
    line-height: 60px; 
    margin:0 auto;
    box-sizing: border-box;
}


svg,
span {
    float: left;
    font: bold;
}

.el-menu {
    padding-left: 50px;
    border-bottom: 0;
}
.headersearch {
    position: absolute;
    top: 25px;
    right: 400px;
    
}
</style>